﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h3>分辨率计算</h3>
    <p>
        <label for="printPaperSize">打印的图片</label>
        <select id="printPaperSize">
            <optgroup label="A系列">
                <option value="1682×2378">4A0</option>
                <option value="1189×1682">2A0</option>
                <option value="841×1189">A0</option>
                <option value="594×841">A1</option>
                <option value="420×594">A2</option>
                <option value="297×420">A3</option>
                <option value="210×297">A4</option>
                <option value="148×210">A5</option>
                <option value="105×148">A6</option>
                <option value="74×105">A7</option>
                <option value="52×74">A8</option>
                <option value="37×52">A9</option>
                <option value="26×37">A10</option>
            </optgroup>
            <optgroup label="B系列">
                <option value="1000×1414">B0</option>
                <option value="707×1000">B1</option>
                <option value="500×707">B2</option>
                <option value="353×500">B3</option>
                <option value="250×353">B4</option>
                <option value="176×250">B5</option>
                <option value="125×176">B6</option>
                <option value="88×125">B7</option>
                <option value="62×88">B8</option>
                <option value="44×62">B9</option>
                <option value="31×44">B10</option>
            </optgroup>
            <optgroup label="C系列">
                <option value="917×1297">C0</option>
                <option value="648×917">C1</option>
                <option value="458×648">C2</option>
                <option value="324×458">C3</option>
                <option value="229×324">C4</option>
                <option value="162×229">C5</option>
                <option value="114×162">C6</option>
                <option value="81×114">C7</option>
                <option value="57×81">C8</option>
                <option value="40×57">C9</option>
                <option value="28×40">C10</option>
            </optgroup>
            <optgroup label="其它">
                <option selected="selected" value="48×3276" data-paper="58×3276">58mm超市小票</option>
                <option value="72×3276" data-paper="80×3276">80mm超市小票</option>
            </optgroup>
        </select>
        <br/>
        <label for="horizontalResolution">打印机水平分辨率</label>
        <input value="203" id="horizontalResolution" />
        <select id="horizontalResolutionUnit" onchange="changeHorizontalResolutionUnit()">
            <option selected="selected" value="0">每英寸/Per Inch</option>
            <option  value="1">每毫米/Per MM</option>
            <option value="2">每行/Per Line</option>
        </select>
        <br />
        <label for="verticalResolution">打印机垂直分辨率</label>
        <input value="203" id="verticalResolution" />
        <select id="verticalResolutionUnit" onchange="changeVerticalResolutionUnit()">
            <option selected="selected" value="0">每英寸/Per Inch</option>
            <option value="1">每毫米/Per MM</option>
            <option value="2">每行/Per Line</option>
        </select>
    </p>
    最合适的图片打印尺寸
    <p>
        <label id="ImageSize">图片分辨率：</label>
        <input type="button" onclick="getImageSize();" value="获取图片分辨率"/>
    </p>
    <pre class="brush:csharp;">

    </pre>
</body>
</html>
<script>
    var ResolutionUnit =
        {
            "PerInch": "0",
            "PerMM": "1",
            "PerLine":"2"
        };
    lastHorizontalResolutionUnit = ResolutionUnit.PerInch;
    lastVerticalResolutionUnit = ResolutionUnit.PerInch;
    lastHorizontalResolution = parseFloat(document.getElementById("horizontalResolution").value);
    lastVerticalResolution = parseFloat(document.getElementById("verticalResolution").value);
    
    function changeHorizontalResolutionUnit()
    {
        var hasChanged = false;
        var currentHorizontalResolutionUnit = document.getElementById("horizontalResolutionUnit").value;
        if (lastHorizontalResolutionUnit == ResolutionUnit.PerInch
            && currentHorizontalResolutionUnit == ResolutionUnit.PerMM)
        {
            hasChanged = true;
            var horizontalResolutionDom = document.getElementById("horizontalResolution");
            horizontalResolutionDom.value = lastHorizontalResolution /25.4;
        }
        if (lastHorizontalResolutionUnit == ResolutionUnit.PerMM
            && currentHorizontalResolutionUnit == ResolutionUnit.PerInch
        )
        {
            hasChanged = true;
            var horizontalResolutionDom = document.getElementById("horizontalResolution");
            horizontalResolutionDom.value = lastHorizontalResolution * 25.4;
        }
        if (hasChanged) {
            lastHorizontalResolution = parseFloat(document.getElementById("horizontalResolution").value);
            lastHorizontalResolutionUnit = currentHorizontalResolutionUnit;
        }
    }
    function changeVerticalResolutionUnit()
    {
        var hasChanged = false;
        var currentVerticalResolutionUnit = document.getElementById("verticalResolutionUnit").value;
        if (lastVerticalResolutionUnit == ResolutionUnit.PerInch
            && currentVerticalResolutionUnit == ResolutionUnit.PerMM) {
            hasChanged = true;
            var verticalResolutionDom = document.getElementById("verticalResolution");
            verticalResolutionDom.value = lastVerticalResolution / 25.4;
        }
        if (lastVerticalResolutionUnit == ResolutionUnit.PerMM
            && currentVerticalResolutionUnit == ResolutionUnit.PerInch) {
            hasChanged = true;
            var verticalResolutionDom = document.getElementById("verticalResolution");
            verticalResolutionDom.value = lastVerticalResolution * 25.4;
        }
        if (hasChanged) {
            lastVerticalResolution = parseFloat(document.getElementById("verticalResolution").value);
            lastVerticalResolutionUnit = currentVerticalResolutionUnit;
        }
    }
    function getImageSize() {
        var paperSizeStrings = document.getElementById("printPaperSize").value.split('×');
        var paperWidthMM = parseFloat(paperSizeStrings[0]);
        var paperHeightMM = parseFloat(paperSizeStrings[1]);
        var paperWidthInch = paperWidthMM / 25.4;
        var paperHeightInch = paperHeightMM / 25.4;
        var horizontalResolution = parseFloat(document.getElementById("horizontalResolution").value);
        var horizontalResolutionUnit = document.getElementById("horizontalResolutionUnit").value;
        var ImageWidthPixel = 0;

        if (horizontalResolutionUnit == ResolutionUnit.PerInch) {
            ImageWidthPixel = paperWidthInch * horizontalResolution;
        }
        else if (horizontalResolutionUnit == ResolutionUnit.PerMM) {
            ImageWidthPixel = paperWidthMM * horizontalResolution;
        }
        else if (horizontalResolutionUnit == ResolutionUnit.PerLine)
        {
            ImageWidthPixel = horizontalResolution;
        }
        var verticalResolution = parseFloat(document.getElementById("verticalResolution").value);
        var verticalResolutionUnit = document.getElementById("verticalResolutionUnit").value;
        var ImageHeightPixel = 0;

        if (verticalResolutionUnit == ResolutionUnit.PerInch) {
            ImageHeightPixel = paperHeightInch * verticalResolution;
        }
        else if (verticalResolutionUnit == ResolutionUnit.PerMM) {
            ImageHeightPixel = paperHeightMM * verticalResolution;
        }
        else if (verticalResolutionUnit == ResolutionUnit.PerLine)
        {
            ImageHeightPixel = verticalResolution;
        }
        var imageSizeDom = document.getElementById("ImageSize");
        imageSizeDom.innerText = Math.round(ImageWidthPixel) + "×" + Math.round(ImageHeightPixel);
    }
</script>